<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS压缩、美化和净化工具</title>
<style>
textarea{width:900px;height: 420px;font: 12px/1.6em 'Lucida Console', 'monospace', 'Consolas';letter-spacing: 1px}
textarea::-webkit-scrollbar{width:10px;height:10px;}
textarea::-webkit-scrollbar-button:vertical:increment{background-color:transparent;}
textarea::-webkit-scrollbar-track:enabled{background-color:rgba(113,112,107,0.1);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
</style>
</head>
<body>
<center>
	<p>CSS压缩工具</p>
	<textarea id='code'  spellcheck="false">
	/*   美化：格式化代码，使之容易阅读           */
	/*   净化：将代码单行化，并去除注释           */
	/*   压缩：将代码最小化，加快加载速度         */
	/*   以下是演示代码                           */

	/*reset begin*/
body, h1, h2, h3, h4, h5, h6, hr, p,dl, dt, dd, ul, ol, li,form, fieldset, legend, button,th, td,img{border:medium none;margin: 0;padding: 0;}
body,button{font:12px/1.5 Helvetica,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,Arial;}
input, label, img, th {vertical-align: middle;}
body{background:#F1F2F6;}
img{border:0}
ol,li{list-style:none;}
a{text-decoration: none;}
a:active{background: none}
a{outline: none;}
	</textarea>
	<br>
	<input type="button" name="" value="压缩" id='encode'>
	<input type="button" name="" value="美化" id='decode'>
	<input type="button" name="" value="净化" id='purify'>
	<input type="button" name="" value="清空" id='empty'>
</center>
<script>
var oEncodeBtn = document.getElementById('encode');
var oDecodeBtn = document.getElementById('decode');
var oPurify = document.getElementById('purify');
var oCode = document.getElementById('code');
var oEmpty = document.getElementById('empty');
oEmpty.onclick = function() {
	oCode.value = ''
};

oEncodeBtn.onclick = function() {//压缩代码
	var val = oCode.value;
	val = val.replace(/\/\*(.|\n)*?\*\//g,'');				//去除注释
	val = val.replace(/^\s+|\s+$/g,'');						//清除首尾空格
	val = val.replace(/(:)\s+/g,'$1');  			   		//去除 冒号后多个空格              如 width:  100px  => width:100px
	val = val.replace(/\s{2,}/g,' ');   			   		//去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px
	val = val.replace(/,\s+|\s+,/g,',');			    	//去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3  
	val = val.replace(/;{2,}|;\s+/g,';');   				//去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px 
	val = val.replace(/\s*\{\s*/g,'{');						//去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}
	val = val.replace(/\s*}\s*/g,'}');						//去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}
	val = val.replace(/[\n\t\f\r]/g,'');					//去除换行,制表符,分页符,回车  
	val = val.replace(/;}/g,'}');      					    //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}
	oCode.value = val;
};

oPurify.onclick = function() { //净化工具;
	oEncodeBtn.click();
	var val = oCode.value;
	val = val.replace(/\}/g,'}\n');
	oCode.value = val;
};

oDecodeBtn.onclick = function() { //格式化代码
	var val = oCode.value;
	val = val.replace(/(\*\/)\s+(\w)/g,'$1\n$2'); //格式化注释后的多余空格					
	val = val.replace(/(:)\s+/g,'$1');  	//格式化冒号间多余空格		   		
	val = val.replace(/,\s+|\s+,/g,',');	//格式化逗号间多余空格		    	
	val = val.replace(/;{2,}|;\s+/g,';');   //格式化分号后多余字符 				
	val = val.replace(/;}/g,'}'); 			//去除最后一个分号
	val = val.replace(/\s*\{\s*/g,' {\n\t');//格式化左{	
	val = val.replace(/\s*}\s*/g,'\n}\n');  //格式化左}
	val = val.replace(/\s*;\s*/g, ';\n\t'); //格式化属性
	oCode.value = val;						
};
</script>
<div style="text-align:center;">
<p><a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>